<template>
<!--  系统配置-->
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <div class="table-operator">
          <a-button v-action:add type="primary" icon="plus" @click="add"
            >新建
          </a-button>
        </div>

        <a-table
          ref="table"
          size="default"
          :columns="columns"
          :data-source="datalist"
          :pagination="false"
          :rowKey="record => record.id"
          :scroll="{ x: true }"
        >
          <span v-action:changeStatus slot="status" slot-scope="status, record">
            <a-switch
              :checked="buer[status]"
              @change="offset(record)"
              checked-children="启用"
              un-checked-children="未启用"
            />
          </span>
          <span slot="type" slot-scope="type">
            {{ istype[type] }}
          </span>

          <template slot="操作" slot-scope="text, record">
            <a
              href="javascript:;"
              style="margin-right:10px"
              v-action:edit
              @click="edit(record)"
              >编辑</a
            >
            <a-popconfirm
              v-action:del
              title="您确定要删除吗?"
              @confirm="onDelete(record)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <a-pagination
          show-quick-jumper
          :defaultPageSize="1"
          :current="yeshu"
          :total="totalnum"
          @change="onChange1"
          style=" margin-top:15px;text-align:right"
        />
      </div>

      <a-modal
        :title="Title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        cancel-text="取消"
        ok-text="确定"
      >
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
          @submit="handleOk"
        >
          <a-form-item label="id" v-if="isId">
            <a-input placeholder="id" disabled v-decorator="['id']" />
          </a-form-item>
          <a-form-item label="code编码">
            <a-input
              placeholder="请输入code编码"
              v-decorator="[
                'code',
                { rules: [{ required: true, message: '请输入code编码' }] }
              ]"
            />
          </a-form-item>
          <a-form-item label="value值">
            <a-input
              placeholder="请输入value"
              v-decorator="[
                'value',
                { rules: [{ required: true, message: '请输入value' }] }
              ]"
            />
          </a-form-item>
          <a-form-item label="是否启用">
            <a-select
              v-decorator="[
                'status',
                { rules: [{ required: true, message: '请选择是否启用' }] }
              ]"
              placeholder="请选择是否启用"
            >
              <a-select-option
                v-for="(item, i) in yingjilist"
                :key="i"
                :value="item.id"
                >{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { deletes, get, save, updateStatus } from "@/api/sysconfig";

const columns = [
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center"
  },
  {
    title: "创建人",
    dataIndex: "createUserName",
    align: "center"
  },
  {
    title: "id",
    dataIndex: "id",
    align: "center"
  },
  {
    title: "code",
    dataIndex: "code",
    align: "center"
  },
  {
    title: "value",
    dataIndex: "value",
    align: "center"
  },
  {
    title: "备注 ",
    dataIndex: "remark",
    align: "center",
    scopedSlots: { customRender: "remark" }
  },
  {
    title: "type",
    dataIndex: "type",
    align: "center",
    scopedSlots: { customRender: "type" }
  },
  {
    title: "启用状态",
    dataIndex: "status",
    align: "center",
    scopedSlots: { customRender: "status" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    fixed: "right",
    scopedSlots: { customRender: "操作" },
    align: "center"
  }
];
const fields = ["id", "code", "status", "value"];
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      columns,
      datalist: [],
      totalnum: 0,
      yeshu: 1,
      channel: ["启用", "停用"],
      istype: ["系统", "其他"],
      Title: "",
      form: this.$form.createForm(this, { name: "coordinated" }),
      yingjilist: [
        { name: "启用", id: 0 },
        { name: "停用", id: 1 }
      ],
      buer: [true, false],
      isId: false
    };
  },
  mounted() {
    this.getlist(1);
  },
  methods: {
    getlist(val) {
      new Promise((resolve, reject) => {
        get({ pageNo: val, pageSize: 10 })
          .then(response => {
            console.log(response);
            if (response.code == 0) {
              this.datalist = response.data.records;
              this.totalnum = response.data.pages;
            } else {
              this.$notification.error({
                message: "失败",
                description: response.msg
              });
            }
            resolve();
          })
          .catch(error => {
            // this.$notification.error({
            // message: '失败',
            // description: `获取失败`
            // })
            reject(error);
          });
      });
    },
    //分页
    onChange1(pageNumber) {
      this.yeshu = pageNumber;
      this.getlist(pageNumber);
    },
    //新增配置
    add() {
      this.visible = true;
      this.Title = "新增配置";
      fields.forEach(v => this.form.getFieldDecorator(v));
      this.form.setFieldsValue({
        code: "",
        value: "",
        status: "",
        id: ""
      });
      this.isId = false;
    },
    edit(res) {
      this.visible = true;
      this.Title = "编辑配置";
      fields.forEach(v => this.form.getFieldDecorator(v));
      console.log("res", res);
      this.form.setFieldsValue({
        code: res.code,
        value: res.value,
        status: res.status,
        id: res.id
      });
      this.isId = true;
    },
    //改变状态
    offset(val) {
      console.log(val);
      let m;
      if (val.status) {
        m = 0;
      } else {
        m = 1;
      }
      new Promise((resolve, reject) => {
        updateStatus({ id: val.id, status: m })
          .then(response => {
            console.log(response);
            if (response.code == 0) {
              this.getlist(1);
            } else {
              this.$notification.error({
                message: "失败",
                description: response.msg
              });
            }
            resolve();
          })
          .catch(error => {
            // this.$notification.error({
            // message: '失败',
            // description: `获取失败`
            // })
            reject(error);
          });
      });
    },
    handleOk(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          new Promise((resolve, reject) => {
            save(values)
              .then(response => {
                console.log(response);
                if (response.code == 0) {
                  this.visible = false;
                  this.confirmLoading = false;
                  this.$message.info(response.msg);
                  this.getlist();
                }
                resolve();
              })
              .catch(error => {
                reject(error);
                this.confirmLoading = false;
              });
          });
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
    },
    //删除
    onDelete(val) {
      new Promise((resolve, reject) => {
        deletes({ id: val.id })
          .then(response => {
            console.log(response);
            if (response.code == 0) {
              this.getlist(1);

              this.$notification.success({
                message: "成功",
                description: `删除成功`
              });
            } else {
              this.$notification.error({
                message: "失败",
                description: response.msg
              });
            }
            resolve();
          })
          .catch(error => {
            this.$notification.error({
              message: "失败",
              description: `删除成功`
            });
            reject(error);
          });
      });
    }
  }
};
</script>

<style scoped>
.structure_cent {
  background: #fff;
  border: 1px solid #ccc;
}

.structure_cent_title {
  width: 100%;
  font-size: 16px;
  color: #333;
  background: #f6f6f6;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  border-bottom: 1px solid #ccc;
}

.structure_cent_title span {
  border-left: 4px solid #0086ff;
  padding-left: 15px;
}

.structure_cent_b {
  max-width: 1200px;
  margin: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}
</style>